<template>
  <div class="body-box" style="position:relative">
    <div v-if="!sign_show">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="数字码 / 扫码设备验票" name="0"></el-tab-pane>
        <el-tab-pane label="姓名/手机号验票" name="1"></el-tab-pane>
      </el-tabs>
      <el-link type="primary" class="link-to-list" @click="seeCheck()">查看签到列表 >></el-link>
      <!-- 数字码 / 扫码设备验票 -->
      <div style="padding:50px 0;">
        <div v-if="activeName == 0">
          <div class="style-one">
            <input
              type="text"
              class="style-one-input"
              placeholder="请输入参会者数字码或使用扫码设备进行验票"
              v-model="code"
            />
            <div class="style-one-btn" @click="submit()">验票</div>
            <div class="style-one-memo" @mouseover="showQrcode" @mouseout="showQrcode">
              <div>
                下载APP
                <i class="iconfont icon-erweima"></i>
              </div>
              <div>验票更方便</div>
            </div>
          </div>
          <!-- 下载二维码 -->
          <div class="down-qrcode" :style="dow_show ? 'opacity:1' : 'opacity:0'">
            <img
              src="https://dss1.bdstatic.com/6OF1bjeh1BF3odCf/it/u=829888290,2650878176&fm=74&app=80&f=JPG&size=f121,121?sec=1880279984&t=274501980523d63a7d93c94f85aabbab"
              alt
            />
            <div>扫码下载随时用</div>
          </div>
        </div>
        <div v-if="activeName == 1">
          <div class="style-one">
            <input
              type="text"
              class="style-one-input"
              placeholder="请输入姓名或手机号进行查询"
              v-model="search_name"
            />
            <div class="style-one-btn" @click="search()">查询</div>
            <div class="style-one-memo" @mouseover="showQrcode" @mouseout="showQrcode">
              <div>
                下载APP
                <i class="iconfont icon-erweima"></i>
              </div>
              <div>验票更方便</div>
            </div>
          </div>
          <!-- 下载二维码 -->
          <div class="down-qrcode" :style="dow_show ? 'opacity:1' : 'opacity:0'">
            <img
              src="https://dss1.bdstatic.com/6OF1bjeh1BF3odCf/it/u=829888290,2650878176&fm=74&app=80&f=JPG&size=f121,121?sec=1880279984&t=274501980523d63a7d93c94f85aabbab"
              alt
            />
            <div>扫码下载随时用</div>
          </div>
        </div>
      </div>
      <!-- 查询结果 -->
      <el-table :header-cell-style="{background:'#f1f1f1'}" :data="list" v-if="activeName == 1" size="small" v-loading="search_load" element-loading-text="结果查询中">
        <el-table-column label="姓名" prop="form[0].value"></el-table-column>
        <el-table-column label="手机号" prop="form[1].value"></el-table-column>
        <el-table-column label="组别" prop="team_name"></el-table-column>
        <el-table-column label="金额" prop="order_info.total_price"></el-table-column>
        <el-table-column label="下单时间" prop="order_info.create_time"></el-table-column>
        <el-table-column label="来源">
          <template slot-scope="item">
            <el-tag v-if="item.row.order_info.source == 1" size="small" type="success">小程序</el-tag>
            <el-tag v-if="item.row.order_info.source == 2" size="small" type="success">H5</el-tag>
            <el-tag v-if="item.row.order_info.source == 3" size="small" type="success">团报</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100px">
          <template slot-scope="item">
            <el-button
              icon="el-icon-check"
              size="mini"
              @click="signCode(item.row.id,item.$index)"
            >验票</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div v-else>
      <sign-list :active_id="active_id"  @back="backInfo()"></sign-list>
    </div>
  </div>
</template>

<script>
import signList from './sign-list.vue';

export default {
  components : { signList },
  props: { active_id: {} },
  data() {
    return {
      activeName: "0",
      dow_show: false,
      code: "",
      search_name: "",
      list: [],
      sign_show: false,
      search_load : false
    };
  },
  mounted() {
    document.onkeypress = e => {
      var keycode = document.all ? event.keyCode : e.which;
      if (keycode == 13 && this.activeName == "0") {
        this.signCodse();
      }
    };
  },
  methods: {
    //返回
    backInfo(){
      this.sign_show = false;
    },
    //查看签到列表
    seeCheck() {
      this.sign_show = true;
    },
    //票码验票
    submit() {
      this.signCodse();
    },
    signCodse() {
      if (!this.code) return this.toast(0, "请输入票码");
      this.ajaxs("activesign/signByCode", {
        data: { code: this.code },
        success: res => {
          this.toast(res.code, res.msg);
          this.code = "";
        }
      });
    },
    //Id验票
    signCode(id, key) {
      this.ajaxs("activesign/signById", {
        data: { id: id },
        success: res => {
          this.toast(res.code, res.msg);
          if (res.code) {
            this.list.splice(key, 1);
          } else {
            this.search();
          }
        }
      });
    },
    //查询
    search() {
      this.search_load = true;
      if (!this.search_name) return this.toast(0, "请输入姓名或手机号查询");
      this.ajaxs("activesign/searchUser", {
        data: { search_name: this.search_name, active_id: this.active_id },
        success: res => {
          this.search_load = false;
          this.list = res.msg;
        }
      });
    },
    //切换TAB
    handleClick() {
      this.code = "";
      this.search_name = "";
    },
    showQrcode() {
      this.dow_show = !this.dow_show;
    }
  }
};
</script>

<style>
.link-to-list {
  position: absolute;
  top: 30px;
  right: 20px;
}
.down-qrcode {
  text-align: center;
  padding: 10px;
  border: 1px solid #e1e1e1;
  width: 142px;
  position: absolute;
  left: 770px;
  top: 200px;
  z-index: 1111;
  background: #fff;
  transition: all 0.2s linear;
}
.down-qrcode > img {
  width: 120px;
  height: 120px;
}
.down-qrcode > div {
  font-size: 12px;
  margin-top: 5px;
}
.style-one-memo {
  float: left;
  margin-left: 10px;
  padding-top: 10px;
  cursor: pointer;
}
.style-one-btn {
  float: left;
  width: 80px;
  height: 60px;
  background: #8a70c6;
  color: #fff;
  text-align: center;
  line-height: 60px;
  border: 1px solid #8a70c6;
  cursor: pointer;
  border-bottom-right-radius: 5px;
  border-top-right-radius: 5px;
}
.style-one-input {
  float: left;
  width: calc(100% - 170px);
  height: 60px;
  font-size: 30px;
  border: 1px solid #8a70c6;
  border-bottom-left-radius: 5px;
  border-top-left-radius: 5px;
  text-indent: 10px;
  line-height: 60px;
}
.style-one-input:focus {
  outline: none;
}
.style-one-input::placeholder {
  font-size: 16px;
  color: #9faac2;
  vertical-align: baseline;
}
.style-one {
  width: 70%;
  margin: auto;
  overflow: hidden;
}
</style>